<template>
  <div class="book-shuDan" >
    <ul class="shuDan">
      <li v-for="(item,index) in title" :key="index" @click="fn(index)" :class="{active:componentId === arr[index]}">{{item}}</li>
    </ul>
    <keep-alive>
      <component :is="componentId" class="yeMi"></component>
    </keep-alive>
  </div>
</template>

<script>
import Collection from "@/components/BookList/Collection.vue"
import MyBook from "@/components/BookList/MyBook.vue"
export default {
  components:{MyBook,Collection},
  name: 'ShuDan',

  data() {
    return {
      componentId:"MyBook",
      arr:["MyBook","Collection"],
      title:["我的书单","收藏的书单"]
    };
  },

  mounted() {
    
  },
  methods: {
    fn(index){
      this.componentId = this.arr[index];
    }
  },
};
</script>

<style lang="less" scoped>
  .shuDan{
    height:.65rem;
    line-height:.65rem;
    display: flex;
    justify-content: space-between;
    li{
      flex: 1;
      text-align: center;
      font-size:.16rem;
      color:#736b70; 
    }
    .active{
      color:#2785dd;
    }
  }
  .yeMi{
    padding:.1rem 0;
  }
</style>